<template>
  <v-navigation-drawer
    id="default-drawer"
    v-model="drawer"
    :dark="dark"
    :right="$vuetify.rtl"
    :src="drawerImage ? image : ''"
    :mini-variant.sync="mini"
    mini-variant-width="80"
    app
    permanent
  >
    <template
      v-if="drawerImage"
      #img="props"
    >
      <v-img
        :key="image"
        :gradient="gradient"
        v-bind="props"
      />
    </template>

    <div class="px-2">
      <default-drawer-header />

      <v-divider class="mx-3 mb-2" />

      <default-list :items="items" />
    </div>

    <template #append>
      <div class="pa-4 text-center">
        <app-btn
          class="text-none mb-4"
          color="white"
          href="http://172.18.208.241/upf/document"
          small
          text
        >
          <v-icon left>
            mdi-file-document
          </v-icon>
          {{ lanChar.documentation }}
        </app-btn>

        <app-btn
          block
          class="text-none"
          color="secondary"
          href="http://starsine.cn/"
        >
          <v-icon left>
            mdi-web
          </v-icon>

          {{ lanChar.officialWebsite }}
        </app-btn>
      </div>
    </template>

    <div class="pt-12" />
  </v-navigation-drawer>
</template>

<script>
  import globalDef from '@/util/globals'
  import lan from '@/util/lan-char'
  // Utilities
  import { get, sync } from 'vuex-pathify'

  export default {
    name: 'DefaultDrawer',

    components: {
      DefaultDrawerHeader: () => import(
        /* webpackChunkName: "default-drawer-header" */
        './widgets/DrawerHeader'
      ),
      DefaultList: () => import(
        /* webpackChunkName: "default-list" */
        './List'
      ),
    },

    data: () => ({
      lanChar: lan.GetLan(),
    }),

    computed: {
      ...get('user', [
        'dark',
        'gradient',
        'image',
      ]),
      ...get('app', [
        'items',
        'version',
      ]),
      ...sync('app', [
        'drawer',
        'drawerImage',
        'mini',
      ]),
    },

    created () {
    },
    mounted () {
      globalDef.VueObject.$on('lanChange', lanChar => {
        this.lanChar = lanChar
        this.items[0].title = this.lanChar.uiDrawer.UIDrawerItemHomeTitle
        this.items[1].title = this.lanChar.uiDrawer.UIDrawerItemStatusTitle
        this.items[2].title = this.lanChar.uiDrawer.UIDrawerItemConfigTitle
      })
    },

    methods: {
    },
  }
</script>

<style lang="sass">
#default-drawer
  .v-list-item
    margin-bottom: 8px

  .v-list-item::before,
  .v-list-item::after
    display: none

  .v-list-group__header__prepend-icon,
  .v-list-item__icon
    margin-top: 12px
    margin-bottom: 12px
    margin-left: 4px

  &.v-navigation-drawer--mini-variant
    .v-list-item
      justify-content: flex-start !important
</style>
